<template>
  <div class="systemManage">
    <h-header></h-header>
    <div class="content">
      <sidebarM></sidebarM>
      <div class="main-content">
        <div class="search_h clearfix">
          <p>
            <a href="#" onClick="javascript:history.back(-1)">承租人管理</a>
          </p>
        </div>
        <div>
          <div class="search_div">
            <table width="100%" style="margin:30px 0">
              <tr>
                <td width="12%" align="right">类型：</td>
                <td width="21%">
                  <select name class="selectC" v-model="ttype">
                    <option value="" selected style="display:none;">全部</option>
                    <option
                      :value="item.hash.code_id"
                      v-for="item in rentertypeArr"
                      :key="item.id"
                    >{{item.hash.code_name}}</option>
                  </select>
                </td>
                <td align="right" width="12%">姓名：</td>
                <td width="20%">
                  <input type="text" v-model="param">
                </td>
                <div class="searchbtn" @click="searchHouse2(1)" style="margin-left:20px">搜索</div>
              </tr>
            </table>

          </div>
          <div style="padding-left: 30px">
            <div class="search-add">
              <span class="zhipai" @click="newrenter">新增</span>
            </div>
            <div class="content_div">
              <el-table
                ref="multipleTable"
                :data="renterList"
                border
                style="width:96%;margin:20px auto"
              >
                <el-table-column type="index" width="50" label="序号"></el-table-column>
                <el-table-column prop="hash.tname" label="姓名"></el-table-column>
                <el-table-column prop="hash.ttypename" label="类型"></el-table-column>
                <el-table-column prop="hash.address" label="地址"></el-table-column>
                <el-table-column prop="hash.linkman" label="联系人"></el-table-column>
                <el-table-column prop="hash.linkphone" label="联系方式"></el-table-column>
                <el-table-column prop="hash.intime1" label="录入时间"></el-table-column>
                <el-table-column prop="hash.opname" label="录入人"></el-table-column>

                <el-table-column label="操作" width="350" headerAlign="center">
                  <template slot-scope="scope">
                    <el-button type="primary" size="small" @click="gethistoryList(scope.row)">历史记录</el-button>
                    <el-button type="primary" size="small" @click="checkrenter(scope.row)">查看</el-button>
                    <el-button
                      type="primary"
                      size="small"
                      @click="editrenter(scope.row)"
                    >编辑</el-button>
                    <el-button
                      type="danger"
                      size="small"
                      @click="deleterenter(scope.row)"
                    >删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="pagination-wrapper">
                <div class="page_box">
                  <table class="page_table">
                    <tr>
                      <td
                        align="center"
                        valign="middle"
                        nowrap="nowrap"
                        style="border:0;padding-right: 10px;"
                      >
                        <a>
                          <font>
                            <p @click="searchHouse2(1)">首页</p>
                          </font>
                        </a>
                      </td>
                      <td nowrap="nowrap" style="border:0;padding-right: 10px;">
                        <a>
                          <font>
                            <p @click="searchHouse2(num2-1)">上一页</p>
                          </font>
                        </a>
                      </td>
                      <td nowrap="nowrap" style="border:0;padding-right: 10px;">
                        <a>
                          <font>
                            <p @click="searchHouse2(parseInt(num2) + 1)">下一页</p>
                          </font>
                        </a>
                      </td>
                      <td nowrap="nowrap" style="border:0;padding-right: 10px;">
                        <a>
                          <font>
                            <p @click="searchHouse2(ys2)">尾页</p>
                          </font>
                        </a>
                      </td>
                      <td nowrap="nowrap" style="border:0;padding-right: 10px;">
                        <span>
                          <font>第{{this.num2}}页</font>
                        </span>
                      </td>
                      <td nowrap="nowrap" style="border:0;padding-right: 10px;">
                        <span>
                          <font>共{{this.ys2}}页</font>
                        </span>
                      </td>
                      <td nowrap="nowrap" style="border:0;padding-right: 10px;">
                        <span>
                          <font>共{{this.total2}}条记录</font>
                        </span>
                      </td>
                    </tr>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      :title="rentertitle"
      :visible.sync="showrenter"
      width="50%"
    >
      <el-form labelWidth="140px" :disabled="this.rentertitle=='查看承租人'">
        <el-form-item label="单位名称：" class="is-required">
          <el-input v-model="renterData.tname"></el-input>
        </el-form-item>
        <el-form-item label="单位类型：" class="is-required">
          <el-select placeholder="请选择" style="width:100%" v-model="renterData.ttype">
            <el-option
              v-for="item in rentertypeArr"
              :key="item.hash.code_name"
              :label="item.hash.code_name"
              :value="item.hash.code_id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单位性质：" class="is-required">
          <el-select placeholder="请选择" style="width:100%" v-model="renterData.naturer">
            <el-option
              v-for="item in dwxz"
              :key="item.hash.code_name"
              :label="item.hash.code_name"
              :value="item.hash.code_id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="注册地址：" class="is-required">
          <el-input v-model="renterData.address"></el-input>
        </el-form-item>
        <el-form-item label="联系人：" class="is-required">
          <el-input v-model="renterData.linkman"></el-input>
        </el-form-item>
        <el-form-item label="联系方式：" class="is-required">
          <el-input type="number" v-model="renterData.linkphone"></el-input>
        </el-form-item>
        <el-form-item label="单位信用等级：" class="is-required">
          <!-- <el-input v-model="renterData.creditlev"></el-input> -->
          <el-select v-model="renterData.creditlev" placeholder="请选择" style="width:100%">
            <el-option
              v-for="item in creditlevlist"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="员工数量：" class="is-required">
          <el-input v-model="renterData.employee1" oninput = "value=value.replace(/[^\d]/g,'')">
            <template slot="prepend">本地：</template>
          </el-input>
          <el-input v-model="renterData.employee2" oninput = "value=value.replace(/[^\d]/g,'')">
            <template slot="prepend">外地：</template>
          </el-input>
        </el-form-item>
        <el-form-item label="证照应用范围：" class="is-required">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="renterData.rentuse"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="实际经营范围：" class="is-required">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="renterData.actureuse"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="营业执照" v-if="rentertitle=='新增承租人'||rentertitle=='编辑承租人'">
          <el-upload
            class="upload-demo"
            action="url"
            :fileList="fileList"
            multiple
            :limit="2"
            :autoUpload="false"
            :onChange="changefileList"
            ref="upload"
            :httpRequest="upload3"
            :onRemove="removeImg3"
          >
            <el-button slot="trigger" size="small" type="primary">上传</el-button>
          </el-upload>
        </el-form-item>

        <el-form-item label="营业执照" v-if="rentertitle=='查看承租人'">
          <a :href="renterData.buslic" v-if="renterData.buslic">{{renterData.buslicname}} 下载</a>
          <a href="#" v-else>无附件</a>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" v-show="this.rentertitle!=='查看承租人'">
        <el-button @click="showrenter = false">取 消</el-button>
        <el-button type="primary" @click="savenewrenter" v-if="this.rentertitle=='新增承租人'">确 定</el-button>
        <el-button type="primary" @click="saveedit" v-else>保 存</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="历史记录"
      :visible.sync="showhistory"
      width="80%"
    >
      <el-table
        ref="multipleTable"
        :data="historyList"
        style="width:96%;margin:20px auto"
      >
        <el-table-column prop="hash.xh" label="修改次序"></el-table-column>
        <el-table-column prop="hash.tname" label="姓名"></el-table-column>
        <el-table-column prop="hash.ttypename" label="类型"></el-table-column>
        <el-table-column prop="hash.address" label="地址"></el-table-column>
        <el-table-column prop="hash.linkman" label="联系人"></el-table-column>
        <el-table-column prop="hash.linkphone" label="联系方式"></el-table-column>
        <el-table-column prop="hash.updtime1" label="修改时间"></el-table-column>
        <el-table-column prop="hash.updusername" label="修改人"></el-table-column>
        <el-table-column prop="hash.hisinusername" label="操作人"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="gethistoryData(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        width="60%"
        title="历史记录详情"
        :visible.sync="showhistory2"
        appendToBody
      >
        <el-form labelWidth="140px" disabled>
          <el-form-item label="单位名称：">
            <el-input v-model="historyData.tname"></el-input>
          </el-form-item>
          <el-form-item label="单位类型：">
            <el-select placeholder="请选择" style="width:100%" v-model="historyData.ttype">
              <el-option
                v-for="item in rentertypeArr"
                :key="item.hash.code_name"
                :label="item.hash.code_name"
                :value="item.hash.code_id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="单位性质：">
            <el-select placeholder="请选择" style="width:100%" v-model="historyData.naturer">
              <el-option
                v-for="item in dwxz"
                :key="item.hash.code_name"
                :label="item.hash.code_name"
                :value="item.hash.code_id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="注册地址：">
            <el-input v-model="historyData.address"></el-input>
          </el-form-item>
          <el-form-item label="联系人：">
            <el-input v-model="historyData.linkman"></el-input>
          </el-form-item>
          <el-form-item label="联系方式：">
            <el-input type="number" v-model="historyData.linkphone"></el-input>
          </el-form-item>
          <el-form-item label="单位信用等级：">
            <!-- <el-input v-model="historyData.creditlev"></el-input> -->
            <el-select v-model="historyData.creditlev" placeholder="请选择" style="width:100%">
              <el-option
                v-for="item in creditlevlist"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="员工数量：">
            <el-input type="number" v-model="historyData.employee1">
              <template slot="prepend">本地：</template>
            </el-input>
            <el-input type="number" v-model="historyData.employee2">
              <template slot="prepend">外地：</template>
            </el-input>
          </el-form-item>
          <el-form-item label="证照应用范围：">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="historyData.rentuse"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="实际经营范围：">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="historyData.actureuse"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="营业执照">
            <a :href="historyData.buslic" v-if="historyData.buslic">{{renterData.buslicname}} 下载</a>
            <span v-else>无附件</span>
          </el-form-item>
        </el-form>
      </el-dialog>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showhistory = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
import HHeader from '~/components/common/header/Mheader';
import sidebarM from '~/components/common/sidebar/sidebarM';
import NuxtLink from '../.nuxt/components/nuxt-link';


export default {
  data() {
    return {
      fileList: [],
      ttype: '',
      param: '',
      creditlevlist: [{
        value: '优',
        label: '优',
      }, {
        value: '良',
        label: '良',
      }, {
        value: '中',
        label: '中',
      }, {
        value: '差',
        label: '差',
      }],
      historyList: [],
      historyData: {},
      showhistory: false,
      showhistory2: false,
      renterList: [],
      rentertitle: '新增承租人',
      renterData: { ttype: '' },
      rentertypeArr: [],
      showrenter: false,
      dept: localStorage.getItem('dept'),
      zhipai: false,
      oldFileName: [],
      newFileUrl: [],
      sideMenu: [],
      choosedh: [],
      chooseZp: '',
      zpArr: [],
      dwxz: [],
      change: 'map1',
      showTitle: '',
      checkstatus: '',
      jiedao: '',
      village: '',
      housedata: [],
      housedata2: [],
      housedata3: [],
      ts: this.newStore(),
      alldata: [],
      htype: '',
      haddr: '',
      hnum: '',
      num2: 1,
      total2: 0, // 数据总数
      ys2: 0,
      limit2: '30', // 每组有多少条数据
      uploadFileData: {},
      total: 0, // 数据总数
      num: 1, // 当前页
      ys: 0,
      limit: '30', // 每组有多少条数据
    };
  },
  created() {
    this.getSelectList('07', 'rentertypeArr');
    this.getSelectList('12', 'dwxz');
    this.searchHouse2(this.num2);
  },
  methods: {
    changefileList(file) {
      this.fileList = [];
      const flieData = {};
      file = file.raw;
      const fileType = file.type;
      const fileReader = new FileReader();
      fileReader.readAsDataURL(file);
      fileReader.onload = (event) => {
        const a = event.target.result;
        const sendData = a.replace(`data:${fileType};base64,`, '');
        flieData.name = file.name;
        flieData.data = sendData;
        this.fileList.push(flieData);
        this.upload3();
      };
    },
    upload3() {
      this.oldFileName = [];
      this.newFileUrl = [];
      for (let i = 0; i < this.fileList.length; i += 1) {
        const req = {};
        req.oriFileName = this.fileList[i].name;
        req.value = this.fileList[i].data;
        this.spost(this.ts, '/upload2.jsp', req).then((ts) => {
          this.oldFileName.push(ts.d.oldFileName);
          this.newFileUrl.push(ts.d.newFileUrl);
        });
      }
    },
    removeImg3() {
      this.fileList = [];
      this.oldFileName = [];
      this.newFileUrl = [];
    },
    gethistoryData(item) {
      console.log(item);

      this.historyData = item.hash;
      this.showhistory2 = true;
    },
    gethistoryList(item) {
      const req = {
        handle: 'D721B46D2973C039F541EED792A24A2478A9D2FDFE2446E0947983BCB6B87374',
        token: localStorage.getItem('token'),
        tid: item.hash.tid,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.historyList = ts.d.data.operation1;
        this.showhistory = true;
      });
    },
    deleterenter(item) {
      this.$confirm('确认删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          const res = {
            token: localStorage.getItem('token'),
            handle: 'D721B46D2973C0398677806905CDAEA6CAD7F240D2E4ADC8EF0F7C1279F4C8A3',
            tid: item.hash.tid,
          };
          this.spost(this.ts, '/mainservlet', res).then((ts) => {
            this.$message({
              type: 'success',
              message: '删除成功!',
            });
            this.searchHouse2(this.num2);
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
          });
        });
    },
    saveedit() {
      if (this.renterData.tname == undefined) {
        this.$message('单位名称不能为空');
        return;
      }
      if (this.renterData.ttype == '') {
        this.$message('单位类型不能为空');
        return;
      }
      if (this.renterData.naturer == undefined) {
        this.$message('单位性质不能为空');
        return;
      }
      if (this.renterData.address == undefined) {
        this.$message('注册地址不能为空');
        return;
      }
      if (this.renterData.linkman == undefined) {
        this.$message('联系人不能为空');
        return;
      }
      if (this.renterData.linkphone == undefined) {
        this.$message('联系方式不能为空');
        return;
      }
      if (this.renterData.creditlev == undefined) {
        this.$message('单位信用等级不能为空');
        return;
      }

      this.$confirm('确认保存？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        const res = {
          handle: 'D721B46D2973C039C6E0C60985F2781D7AB2C71CE3E3D3AAEF0F7C1279F4C8A3',
          token: localStorage.getItem('token'),
          tid: this.renterData.tid,
          tname: this.renterData.tname,
          ttype: this.renterData.ttype,
          linkman: this.renterData.linkman,
          address: this.renterData.address,
          linkphone: this.renterData.linkphone,
          employee1: this.renterData.employee1,
          employee2: this.renterData.employee2,
          rentuse: this.renterData.rentuse,
          actureuse: this.renterData.actureuse,
          creditlev: this.renterData.creditlev,
          naturer: this.renterData.naturer,
          buslicname: this.oldFileName,
          buslic: this.newFileUrl,

        };
        this.spost(this.ts, '/mainservlet', res).then((ts) => {
          this.$message({
            type: 'success',
            message: '保存成功!',
          });
          this.searchHouse2(this.num2);
          this.showrenter = false;
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消',
        });
      });
    },
    editrenter(item) {
      this.renterData = { ttype: '' };
      this.fileList = [];
      this.oldFileName = [];
      this.newFileUrl = [];
      this.rentertitle = '编辑承租人';
      this.showrenter = true;
      this.renterData = item.hash;
      if (this.renterData.buslicname && this.renterData.buslic) {
        this.fileList.push({ name: this.renterData.buslicname, url: this.renterData.buslic });
      }
      this.oldFileName.push = this.renterData.buslicname;
      this.newFileUrl.push = this.renterData.buslic;
    },
    checkrenter(item) {
      console.log(item);
      this.showrenter = true;
      this.rentertitle = '查看承租人';
      this.renterData = item.hash;
    },
    newrenter() {
      this.rentertitle = '新增承租人';
      this.fileList = [];
      this.renterData = { ttype: '' };
      this.showrenter = true;
    },
    savenewrenter() {
      console.log(this.renterData.tname);
      if (this.renterData.tname == undefined) {
        this.$message('单位名称不能为空');
        return;
      }
      if (this.renterData.ttype == '') {
        this.$message('单位类型不能为空');
        return;
      }
      if (this.renterData.naturer == undefined) {
        this.$message('单位性质不能为空');
        return;
      }
      if (this.renterData.address == undefined) {
        this.$message('注册地址不能为空');
        return;
      }
      if (this.renterData.linkman == undefined) {
        this.$message('联系人不能为空');
        return;
      }
      if (this.renterData.linkphone == undefined) {
        this.$message('联系方式不能为空');
        return;
      }
      if (this.renterData.creditlev == undefined) {
        this.$message('单位信用等级不能为空');
        return;
      }

      this.$confirm('确认新增？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        const res = {
          handle: 'D721B46D2973C039CB316AB2715FEA9CBC7009E576825410BFF0B9210751F692',
          token: localStorage.getItem('token'),
          tname: this.renterData.tname,
          ttype: this.renterData.ttype,
          linkman: this.renterData.linkman,
          address: this.renterData.address,
          linkphone: this.renterData.linkphone,
          employee1: this.renterData.employee1,
          employee2: this.renterData.employee2,
          rentuse: this.renterData.rentuse,
          actureuse: this.renterData.actureuse,
          creditlev: this.renterData.creditlev,
          naturer: this.renterData.naturer,
          buslicname: this.oldFileName,
          buslic: this.newFileUrl,
        };
        this.spost(this.ts, '/mainservlet', res).then((ts) => {
          this.$message({
            type: 'success',
            message: '新增成功!',
          });
          this.searchHouse2(this.num2);
          this.showrenter = false;
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消',
        });
      });
    },

    searchHouse2(p_num) {
      if (p_num < 1) {
        p_num = 1;
      }
      if (p_num > this.ys2 && this.ys2 > 0) {
        p_num = this.ys2;
      }
      const res = {
        handle: 'D721B46D2973C039F541EED792A24A2478A9D2FDFE2446E0CD3A43E9777C4E90',
        token: localStorage.getItem('token'),
        start: p_num,
        param: this.param,
        ttype: this.ttype,
      };
      this.spost(this.ts, '/mainservlet', res).then((ts) => {
        this.renterList = ts.d.data.operation1;
        this.total2 = ts.d.data.operation2[0].hash.allrs;
        this.ys2 = ts.d.data.operation2[0].hash.ys;
        this.num2 = ts.d.data.operation2[0].hash.beg;
        this.limit2 = ts.d.data.operation2[0].hash.limit;
      });
    },
    getSelectList(codetype, td) {
      const req = {
        handle: '76ABA4BE996F68CEF9A9763329C1A0DD1C1E493C3971E71F',
        token: localStorage.getItem('token'),
        supid: '',
        codetype,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        // console.log(ts.d.data.operation1);
        this[td] = ts.d.data.operation1;
      });
    },
  },
  components: {
    NuxtLink,
    HHeader,
    sidebarM,
  },
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  table >>> .el-button--text
    color: #00f
    padding: 0 5px 0 0
    border-radius: 0
    border-right: 1px solid #999
  table >>> .el-message--success
    color: #00f
  // table >>> .el-button--text
  //   border-right: none;
  .show-role >>> .el-button
    padding: 5px 15px
  .show-role >>> .el-button--primary
    background: #69f
    border-color: #69f
  .systemManage
    width: 100%
    .content
      display: flex
      width: 100%
      min-height: 600px
      .sidebar
        flex: 0 0 200px
        width: 200px
        background: #F2F2F2
        border-right: 1px solid #ccc
        .menu
          display: block
          width: 100%
          text-indent: 2em
          cursor: pointer
          background: #ffffff
          .title
            height: 48px
            line-height: 48px
            border-bottom: 1px solid #ccc
            padding-left: 10px
            &.choosed
              background #ccc
              color #333
      .main-content
        flex: 1
        min-height: 780px;
        .search_h
          height: 44px
          line-height: 44px
          padding-left: 20px
          background: #f2f2f2
          border-bottom: 2px solid #fff
          p
            float: left
            font-size: 16px
            a
              color: #69f
            span
              font-size: 14px
              padding-left: 15px

.pagination-wrapper {
  height: 60px;
  text-align: center;

  .page_table {
    margin: 0 auto;
    border: 0;
  }

  a {
    &:hover {
      text-decoration: underline;
      color: blue;
    }
  }

  .desc {
    display: inline-block;
    font-size: 14px;

    span {
      color: #666;

      i {
        padding: 0 3px;
        font-size: 16px;
        color: #25a4bb;
      }
    }
  }
}
.zhipai {
  width: 80px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: #69f;
  padding:9px 15px;
  color:#fff;
  margin-left:22px;
  border-radius: 5px;
}
.search_div {
  margin: 10px 0 10px 0px;
  padding: 8px 55px 8px 0px;
  border-bottom: 1px solid #ddd;
}

.search_div td {
  border: none !important;
  padding: 5px 8px;
}
.searchbtn {
  margin: 10px auto;
  width: 60px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  font-size: 14px;
  background-color: #69f;
  color: #fff;
  font-weight: 400;
  cursor: pointer;
}
.search_div input[type='text'], .search_div select {
  box-sizing: content-box;
  width: 100%;
  padding: 4px 0;
  text-indent: 5px;
  margin-left: 5px;
  border-radius: 2px;
  border: 1px solid #ccc;
  color: #333;
}
</style>

